<template>
  <div class="container">
    <div class="div_box" v-if="deviceInfo.deviceType === 'Camera'">
      <div class="head">基本信息</div>
      <div class="div_neiron">
        <div><span>设备编码：</span>{{ deviceInfo.imei || "-" }}</div>
        <div><span>产品类型：</span>{{ deviceInfo.productName }}</div>
        <div><span>产品型号：</span>{{ deviceInfo.classMark }}</div>
        <div>
          <span>通信协议：</span>
          <span v-if="deviceInfo.protocol == '4'">萤石协议</span>
          <span v-else-if="deviceInfo.protocol == '5'">国标协议</span>
          <span v-else>-</span>
        </div>
        <div>
          <span>设备状态：</span>
          <span v-if="Info.status == '1'">在线</span>
          <span v-else-if="Info.status == '0'">离线</span>
          <span v-else>-</span>
        </div>
        <div><span>创建时间：</span>{{ deviceInfo.createTime || "-" }}</div>
        <div style="width: 100%">
          <span>序列号：</span>{{ deviceInfo.sn || "-" }}
        </div>
      </div>
    </div>
    <div
      class="div_box"
      v-else-if="
        deviceInfo.classMark === 'SDF300' || deviceInfo.classMark === 'SDF400'
      "
    >
      <div class="head">基本信息</div>
      <div class="div_neiron">
        <div><span>设备编码：</span>{{ deviceInfo.imei || "-" }}</div>
        <div><span>设备ID：</span>{{ deviceInfo.deviceId || "-" }}</div>
        <div><span>产品类型：</span>{{ deviceInfo.productName }}</div>
        <div><span>产品型号：</span>{{ deviceInfo.classMark }}</div>

        <div>
          <span>告警状态：</span>
          <span v-if="deviceInfo.isAlarm == 0">正常</span>
          <span v-if="deviceInfo.isAlarm == 1">告警</span>
        </div>
        <div><span>iccid：</span>{{ deviceInfo.iccid || "-" }}</div>
        <div><span>imsi：</span>{{ deviceInfo.imsi || "-" }}</div>

        <div>
          <span>最后一次上报时间：</span>{{ deviceList.reportTime || "-" }}
        </div>
        <div><span>离线时间：</span>{{ deviceInfo.offlineTime || "-" }}</div>
        <div><span>上线时间：</span>{{ deviceInfo.onlineTime || "-" }}</div>
      </div>

      <div class="div_neiron" v-if="deviceInfo.classMark === 'SDF300'">
        <div>
          <span>漏电通道1：</span>
          {{ emInfo.irInt != null ? emInfo.irInt : "-" }}
          <span class="unit" v-if="emInfo.irInt != null">mA</span>
        </div>
        <div>
          <span>温度通道1：</span>
          {{ emInfo.tpInt1 != null ? emInfo.tpInt1 : "-" }}
          <span class="unit" v-if="emInfo.tpInt1 != null">℃</span>
        </div>
        <div>
          <span>温度通道2：</span>
          {{ emInfo.tpInt2 != null ? emInfo.tpInt2 : "-" }}
          <span class="unit" v-if="emInfo.tpInt2 != null">℃</span>
        </div>
        <div>
          <span>温度通道3：</span>
          {{ emInfo.tpInt3 != null ? emInfo.tpInt3 : "-" }}
          <span class="unit" v-if="emInfo.tpInt3 != null">℃</span>
        </div>
        <div>
          <span>温度通道4：</span>
          {{ emInfo.tpInt4 != null ? emInfo.tpInt4 : "-" }}
          <span class="unit" v-if="emInfo.tpInt4 != null">℃</span>
        </div>
        <div>
          <span>功率：</span>{{ emInfo.p || "-" }}
          <span class="unit" v-if="emInfo.p">kw</span>
        </div>
        <div>
          <span>A相电压：</span>{{ emInfo.ua || "-" }}
          <span class="unit" v-if="emInfo.ua">V</span>
        </div>
        <div>
          <span>B相电压：</span>{{ emInfo.ub || "-" }}
          <span class="unit" v-if="emInfo.ub">V</span>
        </div>
        <div>
          <span>C相电压：</span>{{ emInfo.uc || "-" }}
          <span class="unit" v-if="emInfo.uc">V</span>
        </div>
        <div>
          <span>A相电流：</span>{{ emInfo.ia || "-" }}
          <span class="unit" v-if="emInfo.ia">A</span>
        </div>
        <div>
          <span>B相电流：</span>{{ emInfo.ib || "-" }}
          <span class="unit" v-if="emInfo.ib">A</span>
        </div>
        <div>
          <span>C相电流：</span>{{ emInfo.ic || "-" }}
          <span class="unit" v-if="emInfo.ic">A</span>
        </div>
        <!-- <div><span>额定电流规格：</span>{{ emInfo.ctInt || "-" }}</div> -->
        <!-- <div><span>电压倍率：</span>{{ emInfo.ptInt || "-" }}</div> -->
        <div><span>功率因数：</span>{{ emInfo.pf || "-" }}</div>
        <div>
          <span>电能：</span>{{ emInfo.ep || "-" }}
          <span class="unit" v-if="emInfo.ep">kwh</span>
        </div>
      </div>

      <div class="div_neiron" v-if="deviceInfo.classMark === 'SDF400'">
        <div>
          <span>漏电通道1：</span
          >{{ emInfo.irInt != null ? emInfo.irInt : "-" }}
          <span class="unit" v-if="emInfo.irInt != null">mA</span>
        </div>
        <div>
          <span> 温度通道1：</span
          >{{ emInfo.tpInt != null ? emInfo.tpInt : "-" }}
          <span class="unit" v-if="emInfo.tpInt != null">℃</span>
        </div>
        <!-- <div><span>额定电流规格：</span>{{ emInfo.ctInt || "-" }}</div> -->
        <div>
          <span>电压值：</span>{{ emInfo.vuInt || "-" }}
          <span class="unit" v-if="emInfo.vuInt">V</span>
        </div>
        <div>
          <span>电流值：</span>{{ emInfo.currentInt || "-" }}
          <span class="unit" v-if="emInfo.currentInt">A</span>
        </div>
        <div>
          <span>功率：</span>{{ emInfo.p || "-" }}
          <span class="unit" v-if="emInfo.p">kw</span>
        </div>
        <div><span>功率因数：</span>{{ emInfo.pf || "-" }}</div>
        <div>
          <span>电能：</span>{{ emInfo.ep || "-" }}
          <span class="unit" v-if="emInfo.ep">kwh</span>
        </div>
      </div>

      <div class="div_neiron">
        <div>
          <span>过压：</span>
          <span>{{ emInfo.overvoltage | whetherStatus }}</span>
        </div>
        <div>
          <span>欠压：</span>
          <span>{{ emInfo.undervoltage | whetherStatus }}</span>
        </div>
        <div>
          <span>缺相：</span>
          <span>{{ emInfo.missingPhase | whetherStatus }}</span>
        </div>
        <div>
          <span>过流：</span>
          <span>{{ emInfo.overcurrent | whetherStatus }}</span>
        </div>
        <div>
          <span>过载：</span>
          <span>{{ emInfo.overload | whetherStatus }}</span>
        </div>
      </div>
    </div>
    <div class="div_box" v-else>
      <div class="head">基本信息</div>
      <div class="div_neiron">
        <div><span>设备编码：</span>{{ deviceInfo.imei || "-" }}</div>
        <div><span>设备ID：</span>{{ deviceInfo.deviceId || "-" }}</div>
        <div><span>产品类型：</span>{{ deviceInfo.productName }}</div>
        <div><span>产品型号：</span>{{ deviceInfo.classMark }}</div>
        <div>
          <span>设备状态：</span>
          <span v-if="deviceInfo.deviceType == 'Camera'">-</span>
          <span v-else-if="deviceInfo.online == 1">在线</span>
          <span v-else>离线</span>
        </div>
        <div>
          <span>告警状态：</span>
          <span v-if="deviceInfo.isAlarm == 0">正常</span>
          <span v-if="deviceInfo.isAlarm == 1">告警</span>
        </div>
        <div>
          <span>信号强度：</span>
          <span v-if="deviceList.ecl == 0">优</span>
          <span v-else-if="deviceList.ecl == 1">良</span>
          <span v-else-if="deviceList.ecl == 2">差</span>
          <span v-else-if="deviceList.ecl == '' || deviceList.ecl == null"
            >-</span
          >
          <span v-else>差</span>
        </div>
        <div><span>电量值：</span>{{ deviceInfo.batteryValue || "-" }}</div>
        <div><span>信噪比：</span>{{ deviceList.sinr || "-" }}</div>
        <div><span>信号接收功率：</span>{{ deviceList.rsrp || "-" }}</div>
        <div><span>iccid：</span>{{ deviceInfo.iccid || "-" }}</div>
        <div><span>imsi：</span>{{ deviceInfo.imsi || "-" }}</div>
        <div>
          <span>{{
            deviceInfo.deviceType == "SmokeAlarm"
              ? "模组软件版本："
              : "软件版本："
          }}</span
          >{{ deviceInfo.softwareVersion || "-" }}
        </div>

        <!-- 烟感 -->
        <div v-if="deviceInfo.deviceType == 'SmokeAlarm'">
          <span>单片机软件版本：</span
          >{{ deviceInfo.scmSoftwareVersion || "-" }}
        </div>

        <div><span>硬件版本：</span>{{ deviceInfo.hardVersion || "-" }}</div>

        <div><span>物理小区标识：</span>{{ deviceList.pci || "-" }}</div>
        <div><span>小区位置信息：</span>{{ deviceList.cellId || "-" }}</div>

        <!-- 燃气 -->
        <div v-if="deviceInfo.deviceType == 'GasSensor'">
          <span>气体浓度采样值：</span>{{ deviceList.gasSampleValue || "-" }}
        </div>
        <!-- 烟感 -->
        <div v-if="deviceInfo.deviceType == 'SmokeAlarm'">
          <span>烟雾浓度：</span>{{ deviceList.smokeValue || "-" }}
        </div>
        <div v-if="deviceInfo.deviceType == 'SmokeAlarm'">
          <span>温度值：</span>{{ deviceList.temperature || "-" }}
        </div>

        <!-- 门磁 -->
        <div v-if="deviceInfo.deviceType == 'DoorMagnetism'">
          <span>开关门状态：</span>
          <span v-if="deviceInfo.status == 1">开门</span>
          <span v-if="deviceInfo.status == 0">关门</span>
        </div>

        <!-- 红外 -->
        <div v-if="deviceInfo.deviceType == 'Infrared'">
          <span>工作模式：</span>
          <span v-if="deviceInfo.workMode == 0">普通模式</span>
          <span v-if="deviceInfo.workMode == 1">实时上报模式</span>
          <span v-if="deviceInfo.workMode == 2">活动量统计模式</span>
          <span v-if="deviceInfo.workMode == 3">建行模式</span>
          <span v-if="deviceInfo.workMode == 4">三小场所模式</span>
          <span v-if="deviceInfo.workMode == 5">老人独居模式</span>
        </div>

        <!-- 消防水压 -->
        <div v-if="deviceInfo.deviceType == 'FireHydrant'">
          <span>IMSI：</span>{{ deviceInfo.imsi || "-" }}
        </div>
        <div v-if="deviceInfo.deviceType == 'FireHydrant'">
          <span>告警门限：</span>{{ deviceInfo.alarmsTh || "-" }}
        </div>
        <div v-if="deviceInfo.deviceType == 'FireHydrant'">
          <span>传感器数据：</span>{{ deviceList.sensorDat || "-" }}
        </div>
        <div v-if="deviceInfo.deviceType == 'FireHydrant'">
          <span>CSQ：</span>{{ deviceList.csq || "-" }}
        </div>

        <!-- 无线数字压力表 -->
        <div v-if="deviceInfo.deviceType == 'PressureGauge'">
          <span>压强：</span>{{ deviceList.mpa || "-" }}
        </div>

        <!-- 无线数字液位表 -->
        <div v-if="deviceInfo.deviceType == 'TankGauge'">
          <span>深度：</span>{{ deviceList.mpa || "-" }}
        </div>

        <div>
          <span>最后一次上报时间：</span>{{ deviceList.reportTime || "-" }}
        </div>
        <!-- <div><span>创建时间：</span>{{ deviceInfo.createTime || "-" }}</div> -->
        <div><span>离线时间：</span>{{ deviceInfo.offlineTime || "-" }}</div>
        <div><span>上线时间：</span>{{ deviceInfo.onlineTime || "-" }}</div>
      </div>
    </div>

    <div
      class="div_box"
      v-if="user.roleName == 'ORG_ADMIN' || user.roleName == 'TENANT_ADMIN'"
    >
      <div class="head">安装信息</div>
      <div class="div_neiron">
        <div><span>安装点：</span>{{ deviceInfo.spaceName || "-" }}</div>
      </div>
    </div>

    <div
      class="div_box"
      v-if="
        deviceInfo.deviceType != 'Camera' &&
        !(
          deviceInfo.classMark === 'SDF300' || deviceInfo.classMark === 'SDF400'
        ) &&
        !(
          deviceInfo.classMark === 'LK-SGBJ-01' ||
          deviceInfo.classMark === 'LK-LXBJ-01'
        )
      "
    >
      <div class="head">设备属性</div>
      <div class="div_tab">
        <div
          @click="devtypeClick('battery_value')"
          :style="typeName == '电池电量' ? 'border: 1px solid #5848FF;' : ''"
        >
          <span>电池电量</span>
          <span>{{ deviceInfo.batteryValue || 0 }}%</span>
        </div>
        <div
          @click="devtypeClick('battery_voltage')"
          v-if="
            deviceInfo.deviceType != 'FireHydrant' &&
            deviceInfo.deviceType != 'PressureGauge' &&
            deviceInfo.deviceType != 'TankGauge'
          "
          :style="typeName == '电池电压' ? 'border: 1px solid #5848FF;' : ''"
        >
          <span>电池电压</span>
          <span>{{ deviceList.batteryVoltage || 0 }}V</span>
        </div>
        <!-- 烟感 -->
        <div
          @click="devtypeClick('temperature')"
          v-if="deviceInfo.deviceType == 'SmokeAlarm'"
          :style="typeName == '温度' ? 'border: 1px solid #5848FF;' : ''"
        >
          <span>温度</span>
          <span>{{ deviceList.temperature || 0 }}°</span>
        </div>
        <div
          @click="devtypeClick('smoke_value')"
          v-if="deviceInfo.deviceType == 'SmokeAlarm'"
          :style="typeName == '烟雾浓度' ? 'border: 1px solid #5848FF;' : ''"
        >
          <span>烟雾浓度</span>
          <span>{{ deviceList.smokeValue || 0 }}</span>
        </div>
        <!-- 燃气 -->
        <div
          @click="devtypeClick('gas_sample_value')"
          v-if="deviceInfo.deviceType == 'GasSensor'"
          :style="typeName == '气体浓度' ? 'border: 1px solid #5848FF;' : ''"
        >
          <span>气体浓度</span>
          <span>{{ deviceList.gasSampleValue || 0 }}</span>
        </div>
        <!-- 消防水压 -->
        <div
          @click="devtypeClick('sensor_dat')"
          v-if="deviceInfo.deviceType == 'FireHydrant'"
          :style="typeName == '传感器数据' ? 'border: 1px solid #5848FF;' : ''"
        >
          <span>传感器数据</span>
          <span>{{ deviceList.sensor_dat || 0 }}</span>
        </div>
        <div
          @click="devtypeClick('csq')"
          v-if="deviceInfo.deviceType == 'FireHydrant'"
          :style="typeName == 'CSQ' ? 'border: 1px solid #5848FF;' : ''"
        >
          <span>CSQ</span>
          <span>{{ deviceList.csq || 0 }}</span>
        </div>
        <!-- 无线数字压力表 -->
        <div
          @click="devtypeClick('mpa')"
          v-if="deviceInfo.deviceType == 'PressureGauge'"
          :style="typeName == 'mpa' ? 'border: 1px solid #5848FF;' : ''"
        >
          <span>压强</span>
          <span>{{ deviceList.mpa || 0 }}MPa</span>
        </div>
        <!-- 无线数字液位表 -->
        <div
          @click="devtypeClick('mpa')"
          v-if="deviceInfo.deviceType == 'TankGauge'"
          :style="typeName == 'mpa' ? 'border: 1px solid #5848FF;' : ''"
        >
          <span>深度</span>
          <span>{{ deviceList.mpa || 0 }}m</span>
        </div>
      </div>
    </div>

    <div
      class="div_box"
      v-if="
        deviceInfo.deviceType != 'Camera' &&
        !(
          deviceInfo.classMark === 'SDF300' || deviceInfo.classMark === 'SDF400'
        ) &&
        !(
          deviceInfo.classMark === 'LK-SGBJ-01' ||
          deviceInfo.classMark === 'LK-LXBJ-01'
        )
      "
    >
      <div class="head">{{ typeName }}曲线</div>
      <div id="device" style="width: 100%; height: 300px"></div>
      <div class="timer">
        <div
          @click="timerClick(1)"
          :style="
            timernum == 1
              ? 'background-color: #867AFF;border: none;color: #FFF;'
              : ''
          "
        >
          今日
        </div>
        <div
          @click="timerClick(0)"
          :style="
            timernum == 0
              ? 'background-color: #867AFF;border: none;color: #FFF;'
              : ''
          "
        >
          昨日
        </div>
        <div>
          <el-date-picker
            class="el_date_picker"
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  reqDeviceDataget,
  reqDevicestatistic,
  reqDeviceFindInfo,
} from "@/api/api";
import * as echarts from "echarts";
import { mapState } from "vuex";
import moment from "moment";

export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    return {
      //实现时间限制选择在一个月内而且不能超过当前时间
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.cuttentTime = minDate.getTime();
          if (maxDate) {
            this.cuttentTime = "";
          }
        },
        disabledDate: (time) => {
          //获取当前时间戳
          let myDate = new Date();
          let newY = myDate.getFullYear();
          let newM = myDate.getMonth() + 1;
          let newD = myDate.getDate();
          let oldTime =
            newY +
            "-" +
            (newM < 10 ? "0" + newM : newM) +
            "-" +
            (newD < 10 ? "0" + newD : newD) +
            " " +
            "23:59:59";
          // let oldTime="2022-7-5 23:59:59"
          oldTime = new Date(oldTime).getTime(); // 将中国时间转换成毫秒
          // 今天之后的时间不可选
          if (time.getTime() > oldTime) {
            //time.getTime() > Date.now()
            return true;
          }
          //选择日期范围为一个月
          if (this.cuttentTime != "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.cuttentTime - one;
            const maxTime = this.cuttentTime + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      deviceList: {},
      Info: {},
      value1: "",
      typeName: "电池电量",
      startTime: moment(moment().startOf("day").valueOf()).format(
        "YYYY-MM-DD HH:mm:ss"
      ), //当前时间
      endTime: moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss"), //当前时间
      timernum: "1", //1今日 0昨天
      devtype: "battery_value", //设备属性
      option: {
        color: "#867AFF",
        // color: ['#867AFF'],
        // 分别控制 canvas 距离容器四周的距离
        grid: {
          // left: '3%', //默认10%
          // right: '4%', //默认10%
          // bottom: '8%', //默认60
          top: "15%",
          left: "2%", //默认10%
          right: "4%", //默认10%
          bottom: "5%", //默认60
          containLabel: true,
          //grid区域是否包含坐标轴的刻度标签
        },
        // 提示框设置
        tooltip: {
          trigger: "axis", //触发类型——坐标轴
          // 鼠标移入条目下面的背景
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "rgba(225,225,225,.3)",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          boundaryGap: false, //紧挨边缘
          //设置坐标轴字体颜色和宽度
          axisLine: {
            //这是x轴文字颜色
            lineStyle: {
              color: "#A9AFC8",
            },
          },
          // 单独隐藏刻度线
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          //设置坐标轴字体颜色和宽度
          axisLine: {
            //这是x轴文字颜色
            lineStyle: {
              color: "#A9AFC8",
            },
          },
          // 单独隐藏刻度线
          axisTick: {
            show: false,
          },
          //网格线
          splitLine: {
            show: true, //隐藏或显示
            lineStyle: {
              color: "#A9AFC8",
              type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
            },
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            // smooth: true,//平滑折线图
            // 线条样式
            lineStyle: {
              color: "#867AFF",
              type: "solid", //可选值还有 dotted  solid
            },
          },
        ],
        dataZoom: [
          {
            type: "inside",
            startValue: 0, // 重点在这   -- 开始的值
            endValue: 6, // 重点在这   -- 结束的值
          },
        ],
      },
      emInfo: {}, //电气综合测控装置详情
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    value1(e) {
      // console.log(e);
      if (e) {
        this.timernum = 2;
        this.startTime = e[0];
        this.endTime = e[1];
        this.Devicestatistic();
      } else {
        this.timernum = 1;
        (this.startTime = moment(moment().startOf("day").valueOf()).format(
          "YYYY-MM-DD HH:mm:ss"
        )), //当前时间
          (this.endTime = moment(moment().valueOf()).format(
            "YYYY-MM-DD HH:mm:ss"
          )), //当前时间
          this.Devicestatistic();
      }
    },
  },
  filters: {
    whetherStatus(value) {
      if (value === 0) {
        return "否";
      } else if (value === 1) {
        return "是";
      } else {
        return "-";
      }
    },
  },
  methods: {
    // 获取电气综合测控装置详情
    async getDeviceFindInfo() {
      const res = await reqDeviceFindInfo(this.deviceInfo.deviceId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (res.data.info.info) {
        const info = JSON.parse(res.data.info.info);
        this.emInfo = info;
      }
    },
    // 关闭初始化数据
    closeDialog() {
      this.deviceList = {};
      this.value1 = "";
      this.typeName = "电池电量";
      this.startTime = moment(moment().startOf("day").valueOf()).format(
        "YYYY-MM-DD HH:mm:ss"
      ); //当前时间
      this.endTime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss"); //当前时间
      this.timernum = "1"; //1今日 0昨天
      this.devtype = "battery_value"; //设备属性
    },
    // 点击今日||昨天
    timerClick(e) {
      this.value1 = "";
      if (e == 0) {
        this.timernum = 0;
        // 昨天
        this.startTime = moment(
          moment().add(-1, "days").startOf("day").valueOf()
        ).format("YYYY-MM-DD HH:mm:ss");
        this.endTime = moment(
          moment().add(-1, "days").endOf("day").valueOf()
        ).format("YYYY-MM-DD HH:mm:ss");
        this.Devicestatistic();
      } else {
        this.timernum = 1;
        (this.startTime = moment(moment().startOf("day").valueOf()).format(
          "YYYY-MM-DD HH:mm:ss"
        )), //当前时间
          (this.endTime = moment(moment().valueOf()).format(
            "YYYY-MM-DD HH:mm:ss"
          )), //当前时间
          this.Devicestatistic();
      }
    },
    //imei查询最新设备数据
    async DeviceDataget() {
      const res = await reqDeviceDataget(this.deviceInfo.imei);
      // console.log(res);
      // console.log(this.deviceInfo);
      this.deviceList = res.data.rows || {};
    },
    // 点击设备属性
    devtypeClick(e) {
      this.devtype = e;
      if (e == "battery_value") {
        this.typeName = "电池电量";
      } else if (e == "battery_voltage") {
        this.typeName = "电池电压";
      } else if (e == "temperature") {
        this.typeName = "温度";
      } else if (e == "smoke_value") {
        this.typeName = "烟雾浓度";
      } else if (e == "gas_sample_value") {
        this.typeName = "气体浓度";
      } else if (e == "sensor_dat") {
        this.typeName = "传感器数据";
      } else if (e == "csq") {
        this.typeName = "CSQ";
      } else if (e == "mpa") {
        this.typeName = "mpa";
      }
      this.Devicestatistic();
    },
    // 设备数据统计
    async Devicestatistic() {
      const res = await reqDevicestatistic({
        imei: this.deviceInfo.imei,
        type: this.devtype,
        startTime: this.startTime,
        endTime: this.endTime,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.option.xAxis.data = res.data.row.reportTime;
      this.option.series[0].data = res.data.row.data;
      this.getCahrt();
    },
    // 初始化图表
    getCahrt() {
      var chartDom = document.getElementById("device");
      var deviceType = echarts.init(chartDom); // 基于准备好的dom，初始化echarts实例
      let listener = function () {
        deviceType.resize();
      };
      window.addEventListener("resize", listener);
      this.option && deviceType.setOption(this.option); // 使用指定的配置项和数据显示图表。
    },
    // 获取token
    gettoken() {
      if (this.deviceInfo.protocol != "4") return;
      fetch(
        `https://open.ys7.com/api/lapp/token/get?appKey=d6a1a4287b9a4d78adebaa7bbc8c7125&appSecret=6b9102e6b4ef80beb7067be13d08bd2c`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          this.getDevice(res.data.accessToken);
          // this.accessToken = res.data.accessToken;
        });
    },
    // 获取单个设备信息
    getDevice(accessToken) {
      fetch(
        `https://open.ys7.com/api/lapp/device/info?accessToken=${accessToken}&deviceSerial=${this.deviceInfo.sn}`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          // console.log(res,'res');
          if (res.code != 200) return;
          this.Info = res.data || {};
        });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.container {
  color: @primaryThemeTxtColor4;
  font-size: 14px;
  min-height: 500px;

  .div_box {
    background: @primaryBorderColor3;
    // background: #353A54;
    border-radius: 15px;
    padding: 20px 25px 50px 35px;
    box-sizing: border-box;
    margin-bottom: 15px;
    position: relative;

    .head {
      font-size: 16px;
      color: #7367f0;
      font-weight: 600;
      margin-bottom: 20px;
    }

    .div_neiron {
      display: flex;
      flex-wrap: wrap;
      padding: 0 30px;
      box-sizing: border-box;
      line-height: 35px;

      > div {
        width: 33.33%;

        > span:first-of-type {
          color: @primaryFFFColor6;
        }
      }

      .unit {
        color: @primaryFFFColor5;
        font-size: 12px;
      }
    }

    .div_tab {
      display: flex;

      > div {
        background: @primaryBorderColor4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        margin-right: 15px;
        width: 120px;
        height: 120px;
        cursor: pointer;
        box-sizing: border-box;

        > span:first-of-type {
          margin-bottom: 8px;
        }
      }
    }

    .timer {
      position: absolute;
      right: 3%;
      top: 5%;
      display: flex;
      align-items: center;

      > div:first-of-type {
        height: 34px;
        line-height: 34px;
        border-radius: 5px;
        padding: 0 40px;
        box-sizing: border-box;
        margin-right: 15px;
        cursor: pointer;
        border: 1px solid @primaryBorder;
        color: @primaryFFFColor5;
      }

      > div:nth-of-type(2) {
        height: 34px;
        line-height: 34px;
        border-radius: 5px;
        padding: 0 40px;
        box-sizing: border-box;
        margin-right: 35px;
        cursor: pointer;
        border: 1px solid @primaryBorder;
        color: @primaryFFFColor5;
      }
    }
  }
}

// 时间控件
::v-deep .el-range-input {
  background: @primaryBorderColor3;
}

::v-deep .el-input__inner {
  background-color: @primaryBorderColor3 !important;
  border: 1px solid @primaryBorder !important;
  height: 34px;
  line-height: 34px;
}

::v-deep .el-range-editor.el-input__inner {
  padding: 0 0 0 10px;
}

::v-deep .el-date-editor--daterange.el-input__inner {
  width: 245px;
}

::v-deep .el-date-editor .el-range__icon {
  color: @primaryFFFColor5 !important;
}

::v-deep .el-range-separator {
  color: @primaryFFFColor5 !important;
}

/deep/ .el-input__inner,
/deep/ .el-date-editor .el-range-input {
  color: @primaryFFFColor5 !important;

  &::placeholder {
    color: @primaryFFFColor5 !important;
  }

  &::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: @primaryFFFColor5 !important;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: @primaryFFFColor5 !important;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐 */
    color: @primaryFFFColor5 !important;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: @primaryFFFColor5 !important;
  }
}

// 时间控件结束
</style>
